<template>
	<view class="start-page">
		<view class="start-img">
			<image class="img" mode="" src="/static/start.png"></image>
			<view class="start-time" @click="goHome">0{{ second }}S 跳过</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				second: 1,
				time: null
			}
		},
		methods: {
			goHome() {
				clearInterval(this.time);
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		},
		onLoad() {
			this.time = setInterval(() => {
				--this.second;
				if (this.second <= 0) {
					this.goHome()
				}
			}, 1000);
		}
	}
</script>
<style lang="less" scoped>
	.img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
	.start-page {
		width: 100%;
		.start-img {
			width: 100%;
			height: 100vh;
			position: relative;
		}

		.start-time {
			position: absolute;
			right: 30rpx;
			top: 120rpx;
			background: rgba(0, 0, 0, 0.2);
			height: 44rpx;
			border-radius: 22rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>
